<template>
  <div id="myBarChart"></div>
</template>
<script setup>
import * as echarts from 'echarts'
const props = defineProps({
  listData: {
    required: true,
    type: Array,
    default: []
  }
})
const { listData } = toRefs(props)

onMounted(() => {
  watch(()=>props.listData,()=>{
    const dzaqxpgProjectNumArr = ref([])
    const qyxdzaqxpgProjectNumArr = ref([])
    const dzxqhProjectNumArr = ref([])
    const provinceArr = ref([])
    dzaqxpgProjectNumArr.value = listData.value.map(item=>{return item.dzaqxpgProjectNum})
    qyxdzaqxpgProjectNumArr.value = listData.value.map(item=>{return item.qyxdzaqxpgProjectNum})
    dzxqhProjectNumArr.value = listData.value.map(item=>{return item.dzxqhProjectNum})
    provinceArr.value = listData.value.map(item=>{return item.province})
    // 需要获取到element,所以是onMounted的Hook
	echarts.init(document.getElementById("myBarChart")).dispose();  
    let myChart = echarts.init(document.getElementById("myBarChart"));
    // 绘制图表
	const option = {
	  tooltip: {
		    trigger: 'axis',
		    axisPointer: {
		      type: 'shadow'
		    }
		  },
		  legend: {
            top: 20,
            right: 6,
            icon: "square",
            itemHeight: 10, 
            itemWidth: 10,
            textStyle: {
              color: "#fff",
            },
          },
		  grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
            // 自动滚动
          },
		  dataZoom: [//滑动条
          {
            xAxisIndex: 0, //这里是从X轴的0刻度开始
            show: false, //是否显示滑动条，不影响使用
            type: "inside", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 4, // 一次性展示几个。
          }
       	  ],
		  xAxis: [
		    {
		      type: 'category',
		      data: provinceArr.value,
			  axisTick:{show:false},
			  axisLabel: {
              fontSize: 12,
              interval: 0, //设置间隔为0
              textStyle: {
                color: " #fff",
              },
            },
		    }
		  ],
		  yAxis: [
		    {
		      type: 'value',
			  axisTick:{show:false},
			  axisLine:{show:false},
		      //设置Y轴颜色
			  splitLine:{
				show:true,
				lineStyle: { color: ['#475ADB'], type: 'dashed',opacity:0.5 }
			  },
		      axisLabel: {
				fontSize: 12,
				textStyle: {
					color:'rgba(255,255,255,0.5)',
					
	          	},
	          },
		    }
		  ],
		  series: [
		    {
		      name: '地震安全性评价',
		      type: 'bar',
		      stack: 'Ad',
		      emphasis: {
		        focus: 'series'
		      },
		      itemStyle: {
		        color: '#46FFFF'  // 设置地震滑坡的颜色
		      },
		      barWidth: 20,  // 设置柱宽度为 20 像素
		      data: dzaqxpgProjectNumArr.value,
		    },
		    {
		      name: '区域性地震安全性评价',
		      type: 'bar',
		      stack: 'Ad',
		      emphasis: {
		        focus: 'series'
		      },
		      itemStyle: {
		        color: '#FFB35B'  // 设置砂土液化的颜色
		      },
		      data: qyxdzaqxpgProjectNumArr.value
		    },
		    {
		      name: '地震小区划',
		      type: 'bar',
		      stack: 'Ad',
		      emphasis: {
		        focus: 'series'
		      },
		      itemStyle: {
		        color: '#ED5385'  // 设置软土震陷的颜色
		      },
		      data: dzxqhProjectNumArr.value,
		    },
		  ]
	}
	var timer = null;
      // 使用刚指定的配置项和数据显示图表。
      timer = setInterval(function () {
      // 每次向后滚动一个，最后一个从头开始；
      // SData.length - 1 为数组的长度，索引从0开始，所以长度减一；
      if (option.dataZoom[0].endValue == props.listData.length - 1) {
        option.dataZoom[0].endValue = 4;
        option.dataZoom[0].startValue = 0;
      }
      else {
        option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
        option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
      }
      myChart.setOption(option,true); // 这条不能省略；

	}, 2000);
	myChart.setOption(option,true);
    window.onresize = function () { // 自适应大小
      myChart.resize();
    };
  }, { deep: true, immediate: true })
})

</script>
<style lang='scss' scoped>
#myBarChart{
  width: 420px;
  height: 205px;
  margin: 0px 0 0 0;
  font-size: 14px;
}
</style>